<template>
  <transition name="app-fade" mode="out-in" appear>
    <RouterView />
  </transition>
</template>

<script setup lang="ts">
import {onMounted} from 'vue';
import {useGlobalSettingStore} from '@/stores/globalSettingStore';
import {switchTheme} from '@/utils/switchTheme';

const globalSettingStore = useGlobalSettingStore();
const { changePrimary, switchDark, switchGrayscale, switchColorBlind } = switchTheme();

// 应用主题设置
const applyThemeSettings = () => {
  // 应用主色调
  changePrimary(globalSettingStore.primary);
  
  // 应用暗黑模式
  if (globalSettingStore.isDark) {
    switchDark();
  }

  // 应用灰色模式
  if (globalSettingStore.isGrayscale) {
    switchGrayscale();
  }

  // 应用色弱模式
  if (globalSettingStore.isColorBlind) {
    switchColorBlind();
  }
};

// 监听窗口大小变化并初始化应用
onMounted(() => {
  // 应用保存的主题设置
  applyThemeSettings();
});

</script>

<style>
.app-fade-enter-active,
.app-fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.app-fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.app-fade-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>
